<template>
	<view>
		<view class="loading" v-if="loading || fail">
			<u-loading v-if="loading"></u-loading>
			<u-empty mode="list" text="暂无内容" v-if="fail"></u-empty>
		</view>
		<block v-else>
			<u-gap></u-gap>
			<view class="list">
				<!-- @click="$u.route('/pages/other/storeDetail/storeDetail',{
					id:item.id
				})" -->
				<view @click="$u.route('/pages/other/newStoreDetail/newStoreDetail',{
					store_id:item.id
				})" class="item" v-for="(item,index) in storeList"
				 :key="index">
					<u-image border-radius="20" width="200" height="200" :src="imageURL+item.imgLogo"></u-image>
					<view class="info">
						<view class="name">
							<view>{{item.merchantName}}</view>
							<view>距离{{item.distance / 1000}}km</view>
						</view>
						<view class="other">
							<u-rate size="20" active-color="#F39D21" :count="5" v-model="item.totalScore"></u-rate>
							<view class="number">{{item.totalScore}}</view>
							<view class="type-text">{{item.sellerClassName}}</view>
						</view>
						<view class="address">
							<u-icon size="24" name="map-fill" color="#AAAAAA"></u-icon>
							{{item.merchantAddress}}
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<u-gap></u-gap>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				imageURL: this.imageURL,
				fail: false,
				storeList: [],
				status: 'loading'
			};
		},
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') return
			this.status = 'loading'
			this.pageNo++
			this.getStoreList(res => {
				if (res == '') {
					this.status = 'nomore'
					return
				}
				this.storeList = this.storeList.concat(res)
				this.status = 'loadmore'
			})
		},
		onLoad(options) {
			this.pageNo = 1
			this.latitude = options.latitude
			this.longitude = options.longitude
			this.storeName = options.key
			uni.setNavigationBarTitle({
				title: options.title || options.key
			})
			this.sellerClassId = options.sellerClassId
			this.getStoreList(result => {
				this.status = result.length < 10 ? 'nomore' : 'loadmore'
				this.loading = false
				if (result == '') {
					this.fail = true
					return
				}
				this.storeList = result
			})
		},
		methods: {
			getStoreList(callback) {
				let json = {
					pageNo: this.pageNo,
					pageSize: 10,
					sellerClassId: this.sellerClassId || '',
					latitude: this.latitude,
					longitude: this.longitude
				}
				if(this.storeName){
					json.merchantAlias = this.storeName
				}
				this.$u.post('sellerstore/listXCX', json).then(res => {
					if (res.list != '') {
						res.list.forEach(item => {
							let totalScore = item.totalScore.toString()
							item.totalScore = totalScore.length == 1 ? totalScore + '.0' : totalScore
						})
					}
					callback(res.list)
				}).catch(error => {
					this.loading = false
					this.fail = true
				})
			}
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 0 30rpx;

		.item {
			background-color: #ffffff;
			display: flex;
			margin-bottom: 20rpx;
			border-radius: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.info {
				padding: 20rpx 20rpx;
				// flex: 1;
				width: 490rpx;

				.address {
					font-size: 24rpx;
					word-break: break-all;
					width: 100%;
				}

				.name {
					font-size: 30rpx;
					font-weight: bold;
					display: flex;
					width: 100%;
					justify-content: space-between;

					view {
						&:first-child {
							// flex: 1;
							// width: 52%;
							padding-right: 30rpx;
							word-break: break-all;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						&:last-child {
							// width: 48%;
							word-break: break-all;
							font-size: 24rpx;
							font-weight: normal;
							white-space: nowrap;
							color: #aaa;
						}
					}
				}

				.other {
					display: flex;
					align-items: center;
					margin-bottom: 13rpx;
					margin-top: 5rpx;
					font-size: 24rpx;

					.type-text {
						color: #AAAAAA;
					}

					.number {
						color: #F39D21;
						margin: 0 15rpx;
					}
				}
			}
		}
	}

	page {
		background-color: #f7f7f7;
	}

	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
